import { defineStore } from "pinia"
import { ref } from "vue"

export const useIndexStore = defineStore(
	"index",
	() => {
		const indexState = ref({
			navWidth: "0px",
			navOpacity: 0,
			header_nav_bar_active: 3,
		})

		const header_nav_list = ref([
			{
				label: "案例",
				id: 0,
				to_name: "charging_effect",
			},
			{
				label: "组件",
				id: 1,
				to_name: "colorfulFont",
			},
			{
				label: "游戏",
				id: 2,
				to_name: "games",
			},
			{
				label: "我的简历",
				id: 3,
				to_name: "introduction",
			},
		])

		const setIndexState = (val) => {
			indexState.value = {
				...indexState.value,
				...val,
			}
		}

		const setHeader_nav_list = (val) => {
			header_nav_list.value[
				indexState.value.header_nav_bar_active
			].to_name = val
		}
		return {
			indexState,
			header_nav_list,
			setIndexState,
			setHeader_nav_list,
		}
	},
	{
		persist: {
			enabled: true,
			strategies: {
				user: {
					storage: localStorage,
					paths: ["indexState", "header_nav_list"],
				},
			},
		},
	}
)
